﻿@{
    ViewBag.Title = "实时水情详情";
    Layout = "~/Views/Shared/_LayoutIndexSearch.cshtml";
}
<style>
    .tableTabBottom {
        width: 100%;
        height: 80px;
        position: fixed;
        bottom: 0;
    }
</style>
@*echarts插件*@
<script src="~/Content/Scripts/echart/echarts.js"></script>

<script type="text/javascript">
    $(function () {
        var stationSearch = $('<div class="ui-form-item ui-border-b" style="padding: 5px"><div class="row"><label class="col-xs-3" style="text-align: right;' +
        ' padding-top: 8px; position: inherit; align-content: center;">站点</label><div class="col-xs-9"><select id="selectedStationName"' +
        ' class="combobox form-control" name="horizontal" required="required" style="background-color: #eee"><option value="1" selected="selected">双溪口</option>' +
        '<option value="2">水库</option></select></div></div></div>');
        $("#searchOptionDiv").prepend(stationSearch);
    });
    
</script>


<ul id="myTab" class="nav nav-tabs row">
    <li class="active col-xs-4">
        <a href="#home" data-toggle="tab">
            实时潮位
        </a>
    </li>
    <li class="col-xs-4">
        <a href="#location" data-toggle="tab">
            测站定位
        </a>
    </li>
    <li class="col-xs-4"><a href="#basicInfo" data-toggle="tab">基本信息</a></li>
</ul>
<div id="myTabContent" class="tab-content">
    <div class="tab-pane fade in active" id="home">
        <!--echarts图表放置界面-->
        <div id="echartsContainer" class="tab-pane"></div>

        <table class="table table-striped table-bordered table-hover">
            <tr>
                <td>累计雨量(mm)</td>
                <td id="totalRain">0</td>
            </tr>
            <tr>
                <td>最大雨量(mm)</td>
                <td id="maxRain">0</td>
            </tr>
            <tr>
                <td>发生时间</td>
                <td id="maxRainTime">2017-08-03</td>
            </tr>
        </table>

    </div>

    <div class="tab-pane fade" id="location">
        <ul class="nav nav-tabs row tableTabBottom">
            <li class="active col-xs-6">
                <a href="#processPic" data-toggle="tab">
                    过程图
                </a>
            </li>
            <li class="col-xs-6">
                <a href="#dataTable" data-toggle="tab">
                    数据表
                </a>
            </li>
        </ul>
        <div class="tab-content">
            <div class="tab-pane fade in active" id="processPic">
                <span style="text-align: center">过程图</span>
            </div>
            <div class="tab-pane fade" id="dataTable">
                <table class="table table-striped table-bordered table-hover">
                    <tr>
                        <td>站名</td>
                        <td>站名0</td>
                    </tr>
                    <tr>
                        <td>站码</td>
                        <td>站码0</td>
                    </tr>
                    <tr>
                        <td>所属河流</td>
                        <td>sddd</td>
                    </tr>
                    <tr>
                        <td>行政区划</td>
                        <td>sdd</td>
                    </tr>
                    <tr>
                        <td>告警值(mm)</td>
                        <td>2</td>
                    </tr>
                </table>
            </div>
        </div>
    </div>

    <div class="tab-pane fade" id="basicInfo">
        基本信息
        
    </div>
</div>

<script>

    loadEcharts();

    //加载Echarts图表
    function loadEcharts() {
        var container = document.getElementById('echartsContainer');
        var resizeContainer = function () {
            container.style.width = window.innerWidth + 'px';
            container.style.height = window.innerHeight - 265 + 'px';
        };
        resizeContainer();
        var myChart = echarts.init(container);

        //指定图标的配置项和数据
        var option = {
            tooltip: {
                trigger: 'axis',
                axisPointer: {
                    animation: false
                }
            },
            legend: {
                data: ['雨量'],
                x: 'right'
            },
            axisPointer: {
                link: {
                    xAxisIndex: 'all'
                }
            },
            dataZoom: [
                {
                    show: true,
                    realtime: true,
                    start: 0,
                    end: 100,

                    xAxisIndex: [0, 1]
                }, {
                    type: 'inside',
                    realtime: true,
                    start: 30,
                    end: 70,
                    xAxisIndex: [0, 1]
                }
            ],
            grid: [
                {
                    left: 40,
                    right: 40
                }, {
                    left: 40,
                    right: 40
                }
            ],
            xAxis: [
                {
                    type: 'category',
                    boundaryGap: false,
                    axisLine: {
                        onZero: true
                    },
                    data: []
                }, {
                    gridIndex: 1
                }
            ],

            yAxis: [
                {
                    type: 'value',
                    name: '单位:mm',
                    min: 0,
                    interval: 25
                }, {
                    gridIndex: 1
                }
            ],
            series: [
                {
                    name: '雨量',
                    type: 'bar',
                    smooth: true,
                    symbol: 'circle',
                    symbolSize: 9,
                    showSymbol: false,
                    lineStyle: {
                        normal: {
                            width: 1
                        }
                    },
                    markPoint: {
                        data: [
                            {
                                type: 'max',
                                name: '最大值'
                            }, {
                                type: 'min',
                                name: '最小值'
                            }
                        ]
                    },
                    markArea: {
                        silent: true,
                        label: {
                            normal: {
                                position: ['10%', '50%']
                            }
                        }

                    },
                    data: []

                }
            ]
        };

        //myChart.showLoading(); //数据加载完之前先显示一段简单的loading动画

        myChart.setOption(option);

        var times = []; //时间数组（实际用来盛放X轴坐标值）
        var rains = []; //雨量数组（实际用来盛放Y坐标值）
        var sum = 0; //累计雨量
        var maxRain; //最大雨量
        var maxRainTime; //最大雨量发生时间
        //进行异步访问数据
        var stcd = $("#selectedStationName").val();
        var startTime = $('#h1Title').text().split(" ~ ")[0].replace("时", "");
        var endTime = $('#h1Title').text().split(" ~ ")[1].replace("时", "");

        $.ajax({
            type: "get",
            async: "true",
            url: "RcHandler.ashx?stcd=" + stcd + "&startTime=" + startTime + "&endTime=" + endTime, //请求的页面
            data: {},
            dataType: "json", //返回数据格式为json
            success: function (result) {
                if (result) {
                    //如果查的数据长度为0 隐藏加载动画，return
                    if (result.length === 0) {
                        myChart.hideLoading(); //隐藏加载动画
                        return;
                    }
                    maxRain = result[0].Drp;
                    maxRainTime = result[0].Tm;
                    for (var i = 0; i < result.length; i++) {
                        sum += Number(result[i].Drp);
                        if (maxRain < Number(result[i].Drp)) {
                            maxRain = Number(result[i].Drp);
                            maxRainTime = result[i].Tm;
                        }
                        times.push(result[i].Tm);
                        rains.push(result[i].Drp);
                    }
                    $("#totalRain").text(sum);
                    $("#maxRain").text(maxRain);
                    $("#maxRainTime").text(maxRainTime + ":00:00");
                    var stationName = $("#selectedStationName option:selected").text();
                    $(document).attr("title", stationName + "雨量站"); //改网页标题


                    myChart.hideLoading(); //隐藏加载动画
                    myChart.setOption({
                        //加载数据图表
                        xAxis: {
                            data: times
                        },
                        yAxis: {
                            max: GetYLine(maxRain),
                            interval: GetYLine(maxRain) / 4
                        },
                        series: [
                            {
                                // 根据名字对应到相应的系列
                                name: '雨量',
                                data: rains
                            }
                        ]
                    });
                }
            },
            error: function () {
                //请求失败时执行该函数
                $('#modalLog').text("图标数据获取失败");
                $("#about").modal("show");
                myChart.hideLoading();
            }
        });

        //用于使echart自适应高度和宽度
        window.onresize = function () {
            //重置容器高宽
            resizeContainer();
            myChart.resize();
        };
    }
</script>

<script type="text/javascript">
    //获取Y轴刻度
    function GetYLine(maxRain) {
        if (maxRain < 10) {
            return 10;
        } else if (maxRain < 30) {
            return 30;
        } else if (maxRain < 50) {
            return 50;
        } else if (maxRain < 100) {
            return 100;
        } else if (maxRain < 150) {
            return 150;
        } else if (maxRain < 200) {
            return 200;
        } else if (maxRain < 250) {
            return 250;
        } else if (maxRain < 300) {
            return 300;
        } else if (maxRain < 350) {
            return 350;
        } else if (maxRain < 400) {
            return 400;
        } else if (maxRain < 500) {
            return 500;
        } else if (maxRain < 800) {
            return 800;
        } else if (maxRain < 1000) {
            return 1000;
        } else if (maxRain < 1500) {
            return 1500;
        } else if (maxRain < 2000) {
            return 2000;
        } else if (maxRain < 2500) {
            return 2500;
        } else if (maxRain < 3000) {
            return 3000;
        } else if (maxRain < 3500) {
            return 3500;
        } else if (maxRain < 4000) {
            return 4000;
        } else if (maxRain < 5000) {
            return 5000;
        } else {
            return 10;
        }
    }
</script>

